import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../../widget/text/text_widget.dart';
import 'line_chart3_logic.dart';
import '../../../../common/app_resources.dart';

class LineChart3Page extends StatefulWidget {
  const LineChart3Page({Key? key}) : super(key: key);

  @override
  State<LineChart3Page> createState() => LineChart3PageState();
}

class LineChart3PageState extends State<LineChart3Page> {
  final logic = Get.put(LineChart3Logic());
  final state = Get.find<LineChart3Logic>().state;

  @override
  Widget build(BuildContext context) {
    return GetBuilder<LineChart3Logic>(builder: (logic) {
      return state.cosPoints.isNotEmpty
          ? Container(
              margin: const EdgeInsets.only(
                left: 32,
                right: 32,
                top: 32,
                bottom: 32,
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  TextWidget(
                    "Line Chart Sample2",
                    TS_FF50E4FF_18_W4,
                  ),
                  const SizedBox(height: 12),
                  Container(
                      decoration: const BoxDecoration(
                        color: AppColors.colorFF1B2339,
                        borderRadius: BorderRadius.all(Radius.circular(8)),
                      ),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          const SizedBox(height: 12),
                          Text(
                            'x: ${state.xValue.toStringAsFixed(1)}',
                            style: const TextStyle(
                              color: AppColors.mainTextColor2,
                              fontSize: 18,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          Text(
                            'sin: ${state.sinPoints.last.y.toStringAsFixed(1)}',
                            style: const TextStyle(
                              color: AppColors.colorFF2196F3,
                              fontSize: 18,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          Text(
                            'cos: ${state.cosPoints.last.y.toStringAsFixed(1)}',
                            style: const TextStyle(
                              color: AppColors.contentColorPink,
                              fontSize: 18,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          const SizedBox(
                            height: 12,
                          ),
                          AspectRatio(
                            aspectRatio: 1.5,
                            child: Padding(
                              padding: const EdgeInsets.only(bottom: 24.0),
                              child: LineChart(
                                LineChartData(
                                  minY: -1,
                                  maxY: 1,
                                  minX: state.sinPoints.first.x,
                                  maxX: state.sinPoints.last.x,
                                  lineTouchData:
                                      const LineTouchData(enabled: false),
                                  clipData: const FlClipData.all(),
                                  gridData: const FlGridData(
                                    show: true,
                                    drawVerticalLine: false,
                                  ),
                                  borderData: FlBorderData(show: false),
                                  lineBarsData: [
                                    state.sinLine(state.sinPoints),
                                    state.cosLine(state.cosPoints),
                                  ],
                                  titlesData: const FlTitlesData(
                                    show: false,
                                  ),
                                ),
                              ),
                            ),
                          )
                        ],
                      )),
                ],
              ))
          : Container();
    });
  }
}
